<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>18.选项卡切换 - 模拟多选</title>
		<style>
			body {
				background-color: rgba(0, 0, 0, .5);	
			}
			
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.clearfix {
				*zoom: 1;
			}
			
			.box {
				width: 380px;
				margin: 50px auto;
			}
			
			.box input {
				float: left;
				width: 120px;
				height: 44px;
				margin-right: 10px;
				outline: none;
				background-color: #000;
				font-weight: normal;
				font-size: 20px;
				line-height: 44px;
				font-family: "Microsoft YaHei";
				color: #fff;
				cursor: pointer;
			}
			
			.box input:last-of-type {
				margin-right: 0;
			}
			
			.box input.active {
				font-weight: bold;
				background-color: #fff;
				color: #000;
			}
		</style>
		<script>
			window.onload = function () {
				var oBox = document.querySelector(".box");
				// console.log(oBox);
				var aBtn = oBox.getElementsByTagName("input");
				// console.log(aBtn.length);
				
				for ( var i = 0, len = aBtn.length; i < len; i++ ) {
					aBtn[i].addEventListener("click", function () {
						// 简单粗暴的方式，哈哈
						this.classList.toggle ('active');
					}, false);
				}
			};
		</script>
	</head>
	<body>
		<div class="box clearfix">
			<input type="button" value="选项卡1" class="active" />
			<input type="button" value="选项卡2" />
			<input type="button" value="选项卡3" />
		</div>
	</body>
</html>